<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<body>
<style>
	.checkbox{
		display: none;
	}
	.switch{
		display: inline-block;
		width: 60px;
		height: 30px;
		border-radius: 15px;
		position: relative;
		background-color: #bdbdbd;
		overflow: hidden;
		box-shadow: #ccc 0px 0px 0px 1px;
	}
	.switch:before{
		content: '';
		position: absolute;
		display: inline-block;
		left: 0;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #fff;
		z-index: 20;
		-webkit-transition:all 0.5s;
		transition: all 0.5s;
	}
	/*switch添加ON，off*/
	.text{
		color: #Fff;
font-size: 14px;
		line-height: 30px;
	}
	.on{
		display: none;
		text-indent: 7px;
	}
	.off{
		display: inline-block;
		text-indent: 30px;
	}
	.checkbox:checked+.switch:before{
		left: 30px;
	}
	
	.checkbox:checked+.switch{
		background-color: #51ccee;
	}
	/*switch添加ON，off*/
	.checkbox:checked+.switch .on{
		display: inline-block;
	}
	.checkbox:checked+.switch .off{
		display: none;
	}
</style>
<label for="switch">
<input type="checkbox" class="checkbox" id="switch">
<div  class="switch">

<!-- switch添加ON，off -->
<span class="text on">ON</span>
<span class="text off">OFF</span>
</div>
</label>
</body>
</html>